<template>
  <el-dialog
      v-model="visible"
      :title="popupTitle"
      :width="width"
      :append-to-body="true"
      draggable
  >
    <slot>{{ content }}</slot>

    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="cancelText" @click="visible=false">{{ cancelText }}</el-button>
        <el-button type="primary" v-if="confirmText" @click="handleConfirm">{{ confirmText }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {computed} from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    // 弹窗标题
    type: String,
    default: ''
  },
  width: {
    // 弹窗的宽度
    type: String,
    default: '30%'
  },
  content: {
    // 弹窗内容
    type: String,
    default: ''
  },
  cancelText: {
    // 取消按钮的文本
    type: String,
    default: '取消'
  },
  confirmText: {
    // 确认按钮的文本
    type: String,
    default: '确认'
  }
})

const emit = defineEmits(['update:visible', 'confirm'])

const popupTitle = computed({
  get() {
    if ('add' === props.title) {
      return '添加'
    } else if ('edit' === props.title) {
      return '修改'
    } else {
      return props.title
    }
  }
})

const visible = computed({
  get() {
    return props.visible
  },
  set(v) {
    emit('update:visible', v)
  }
})

const handleConfirm = function () {
  emit('confirm')
}

</script>

<style scoped>

</style>